<!DOCTYPE html>
<html>

<head>
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
	<title id="pageTitle"></title>
	<link href="/styles/cisco_dialer_config.css" rel="stylesheet" type="text/css">
	<style>
		body            { overflow-x: hidden; }
		p               { text-align: justify; }
		div.container   { width: 600px; margin: auto; padding: 0px 30px 40px 20px; }
		div.settings    { display: block; margin: 0 15px; }
		div.buttons     { margin: 0.8em 0; }
		div.buttons > * { position: relative; float: left; margin-right: 15px !important; }
		div.message     { color: #F03; margin-top: 3px; }
	</style>
</head>

<body>
	<div class="container">
		<h1 id="headerTitle"></h1>
		<hr/>

		<h3 id="phoneAddressLabel"></h3>
		<div class="settings">
			<input type="text" size="55" name="phoneAdress" id="phoneAdress" />
			<p id="phoneAddressDescription"></p>
		</div>

		<h3 id="countryCodeLabel"></h3>
		<div class="settings">
			<select name="countryCode" id="countryCode"></select>
			<p id="countryCodeDescription"></p>
		</div>

		<h3 id="functionsLabel"></h3>
		<div class="settings">
			<div class="checkbox">
				<label>
					<input type="checkbox" value="true" name="contextMenu" id="contextMenu" /><span id="contextMenuLabel"></span> 
				</label>
			</div>
			<div class="checkbox">
				<label>
					<input type="checkbox" value="true" name="inPageDial" id="inPageDial" /><span id="inPageDialLabel"></span>
				</label>
			</div>
 		</div>

		<h3 id="authConfigLabel"></h3>
		<div class="settings">
			<input type="text" size="25" name="authUser" id="authUser" />
			<input type="password" size="24" name="authSecret" id="authSecret" />
			<p id="authConfigDescription"></p>
		</div>

		<h3 id="telUriLabel"></h3>
		<div class="settings">
			<input type="text" size="55" name="telephonyUri" id="telephonyUri" />
			<p id="telUriDescription"></p>
		</div>

		<hr/>
		<p></p>

		<div class="buttons">
			<button id="saveConfig" value="Save" disabled></button>
			<button id="cancelConfig" value="Cancel"></button>
			<div id="statusMessage" class="message"></div>
		</div>
	</div>
</body>

<script src="/scripts/cisco_dialer_sjcl.js"></script>
<script src="/scripts/cisco_dialer_phone.js"></script>
<script src="/scripts/cisco_dialer_classes.js"></script>
<script src="/scripts/cisco_dialer_country.js"></script>
<script src="/scripts/cisco_dialer_config.js"></script>

</html>